{{extend name="layout/layout"}}

{{block name="token_meta"}}
{{:token_meta()}}
{{/block}}

{{block name="resource"}}
{{css href="/static/admin/x-admin/css/login.css" /}}
{{/block}}

{{block name="body"}}

<style>
    .code {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;

        height: 50px;
    }

    .code__input {
        flex-grow: 1;
    }

    .code__img {
        height: 100%;

        margin-left: 20px;
    }

    .code__img img {
        height: 100%;
    }
</style>

<body class="login-bg">

<div class="login layui-anim layui-anim-up">
    <div class="message">{{$adminPage.backstage_login_title.value}}</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form">
        <input name="username" placeholder="用户名|邮箱|手机号" type="text" lay-verify="required" class="layui-input">
        <hr class="hr15">
        <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
        <hr class="hr15">
        <div class="code">
            <input name="code" lay-verify="required" placeholder="验证码" type="text" class="layui-input code__input">

            <div class="code__img">{{:captcha_img()}}</div>
        </div>
        <hr class="hr15">

        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
        <hr class="hr20">
    </form>
</div>

<script type="module">
    import { login } from "/static/admin/js/api/additional/auth.js";
    import { rain } from "/static/admin/js/app.js";
    import { getDomain } from "/static/admin/js/request.js";

    // 强制跳转顶级窗口
    isTopLocation();

    $(function () {
        layui.use(['form'], function () {
            let form = layui.form;

            //监听提交
            form.on('submit(login)', function (data) {
                data.field.password = md5(rain.config.key + data.field.password);

                login(data.field).then(res => {
                    dialog(res.msg, () => {
                        if (200 == res.code) {
                            window.location.href = getDomain();
                        } else {
                            // 替换验证码
                            $(".code__img img").attr('src', "/captcha.html?" + Math.random());
                        }
                    });
                });

                return false;
            });
        });
    })
</script>
</body>

{{/block}}
